<template>
  <div class="mobile-container">
    <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <van-cell v-for="item in state.list" :key="item.id" :title="item.name" >
        <van-button @click="viewApplyForms(item.id)">提交申请</van-button>
      </van-cell>
    </van-list>
  </div>
</template>

<script lang="ts">
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {Notify} from "vant";
import {reactive, ref} from "vue";

export default {
  name: "mobile_view_joined",
  setup() {
    const router = useRouter();
    const store = useStore();
    const query =reactive({
      page:0,
      size:10,
      page_info:null as any
    });
    const state = reactive({
      list: [] as any,
      loading: false,
      finished: false,
    });

    const getPageInfo = function (){
      fetch("api/user/self/club?page="+query.page+"&size="+query.size).then(res=>{
        if(res.status == 200 ){
          return res.json();
        }else{
          // console.log(
          //     res
          // )
        }
      }).then(json=>{
        // console.log(json)
        json.items.forEach(
            (item: any)=>{
              state.list.push(item);
            }
        )
        query.page_info = json.page_info;
        if(query.page_info!=null&&query.page_info.has_next_page){
          query.page++;
          getPageInfo();
        }else{
          state.loading=false;
          state.finished=true;
        }
      })
    }
    const onLoad = () => {
        getPageInfo();
        };
    const viewApplyForms =function (clubid:number){
      router.push({
        path:"viewclubforms",
        query:{
          clubid:clubid
        }
      })
    }
    return {
      router,
      state,
      onLoad,
      viewApplyForms
    }
  }
}
</script>

<style scoped>
.mobile-container {
  padding-top: 30px;
  padding-bottom: 200px;
}
</style>